<template>
  <div class="date-box justify-between">
    <div class="date-box__shortcut">
      <span v-for="(item, index) in dateArr" :key="item.id" :class="{ active: item.id == currentDate }" @click="selectDate(item.id, index)">{{ item.content }}</span>
    </div>
    <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleSelectDate">
    </el-date-picker>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      date: [],

      dateArr: [
        {
          id: 3,
          content: "近三天"
        },
        {
          id: 7,
          content: "近一周"
        },
        {
          id: 30,
          content: "近一个月"
        }
      ],
      currentDate: null
    };
  },

  mounted() {
    this.selectDate();
  },

  methods: {
    selectDate(date = 1, index = -1) {
      this.currentDate = date;
      const end = new Date();
      const start = new Date();
      if (index == 0) {
        //近3天
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
        this.date = [
          moment(start).format("YYYY-MM-DD"),
          moment(end).format("YYYY-MM-DD")
        ];
      } else if (index == 1) {
        //近一周
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        this.date = [
          moment(start).format("YYYY-MM-DD"),
          moment(end).format("YYYY-MM-DD")
        ];
      } else if (index === -1){
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        this.date = [
          moment(start).format("YYYY-MM-DD"),
          moment(end).format("YYYY-MM-DD")
        ];
      }
      else {
        //近一月
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        this.date = [
          moment(start).format("YYYY-MM-DD"),
          moment(end).format("YYYY-MM-DD")
        ];
      }

      this.$emit("selectDate", {
        date: this.date,
        dateType: this.currentDate
      });
    },

    handleSelectDate() {
      this.$emit("selectDate", {
        date: this.date,
        dateType: 3
      });
    },
    reset(){
      this.currentDate = 3;
      const end = new Date();
      const start = new Date();
        //近3天
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
        this.date = [
          moment(start).format("YYYY-MM-DD"),
          moment(end).format("YYYY-MM-DD")
        ];
    }
  }
};
</script>


<style lang="scss" scoped>
.el-input__inner {
  width: 312px;
  height: 36px;
  background-color: #212226;
  border: 0;
}

.date-box {
  width: 620px;
  height: 36px;
  &__shortcut {
    width: 292px;
    height: 100%;
    background-color: #212226;
    color: #949ba4;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    span {
      cursor: pointer;
      width: 96px;
      height: 100%;
      line-height: 36px;
      text-align: center;
      flex: 1;
    }
    span:hover {
      color: #5cfbff;
      font-weight: bold;
    }
    .active {
      background-color: #404249;
      color: #5cfbff;
      font-weight: bold;
    }
  }
}
</style>
